<div class="flex justify-between gap-10">
  <div class="flex flex-col flex-1">
    <h2 class="crayons-subtitle-2 px-1"><%= t("views.admin.users.priviliged_actions.title") %></h2>
    <p class="crayons-subtitle-3 fw-normal color-secondary px-1 mt-1"><%= t("views.admin.users.priviliged_actions.description") %></p>
  </div>
  <div class="flex items-start gap-1">
    <span class="crayons-card crayons-card--secondary px-3 py-1 flex gap-2 items-center" title="<%= t("views.moderations.actions.vomit") %>">
      <%= crayons_icon_tag("twemoji/flag", native: true, width: 16, height: 16) %>
      <span class="fs-s fw-medium lh-base"><%= @countable_flags %></span>
    </span>

    <span class="crayons-card crayons-card--secondary px-3 py-1 ml-3 flex gap-2 items-center" title="<%= t("views.admin.users.flags.total_score") %>">
      <%= crayons_icon_tag("analytics", native: true, width: 16, height: 16) %>
      <span class="fs-s fw-medium lh-base"><%= @user.score %></span>
    </span>
  </div>
</div>

<div id="reaction-content" class="flex flex-col gap-3 px-1 pt-6" style="overflow: auto; height: 406px;">
  <%= render "admin/shared/flag_reactions_table",
             vomit_reactions: @user_vomit_reactions,
             text_section: "users",
             empty_text: t("views.admin.users.priviliged_actions.no_flags") %>
<div>
